<template>
  <BasicModal
    :title="t('layout.header.dropdownChangeApi')"
    v-bind="$attrs"
    @register="register"
    @ok="handelSubmit"
    @cancel="handelCancel"
  >
    <BasicForm @register="registerForm">
      <template #api="{ model, field }">
        <RadioGroup v-model:value="model[field]">
          <Radio
            :style="radioStyle"
            :value="key"
            v-for="(val, key) in addresses"
            :key="key"
            >{{ key }}: {{ val }}</Radio
          >
        </RadioGroup>
      </template>
    </BasicForm>
  </BasicModal>
</template>
<script lang="ts" setup>
import { Radio } from "ant-design-vue";
import { useI18n } from "@/hooks/web/useI18n";
import { BasicModal, useModalInner } from "@/components/Modal";
import { BasicForm, useForm } from "@/components/Form";
import { ref } from "vue";
import { useAppStore } from "@/store/modules/app";
import type { ApiAddress } from "#/store";

const appStore = useAppStore();
const RadioGroup = Radio.Group;
const { t } = useI18n();
const [register, { closeModal }] = useModalInner(async () => {
  initData();
});
// perf 能读取所有.env.xxx文件最好, 另外key与--mode XXX最好相同
const addresses = ref({
  development: "http://www.a.com",
  test: "http://www.b.com",
  prod: "http://www.c.com",
});
const radioStyle = ref({
  display: "flex",
  height: "30px",
  lineHeight: "30px",
});
const [registerForm, { validateFields, setFieldsValue }] = useForm({
  showActionButtonGroup: false,
  schemas: [
    {
      field: "api",
      label: t("layout.header.dropdownChangeApi"),
      colProps: {
        span: 24,
      },
      defaultValue: import.meta.env.MODE || "development", // 当前环境
      required: true,
      // component: 'Input',
      slot: "api",
    },
  ],
});
const handelSubmit = async () => {
  const values = await validateFields();
  appStore.setApiAddress({
    key: values.api,
    val: addresses.value[values.api],
  });
  location.reload();
};
const handelCancel = () => {
  closeModal();
};
const initData = () => {
  const { key = "" } = appStore.getApiAddress as ApiAddress;
  if (key) {
    setFieldsValue({
      api: key,
    });
  }
};
</script>
